<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.oDiv{
				width: 300px;
				height: 300px;
				border: 1px solid firebrick;
				margin: 100px auto;
			}
			.btn{
				overflow: hidden;
			}
			.btn input{
				width: 100px;
				height: 30px;
				float: left;
			}
			ul li{
				width: 300px;
				height: 270px;
				background-color: goldenrod;
				font-size: 50px;
				color: white;
				list-style: none;
				display: none;
				text-align: center;
				line-height: 270px;
			}
			.show{
				display: block;
			}
			.active{
				background-color: green;
				color: white;
			}
			#zuo{
				width: 50px;
				height: 50px;
				background-color: saddlebrown;
				color: white;
				position: absolute;
				left: 0px;
				top: 750px;
			}
				#you{
				width: 50px;
				height: 50px;
				background-color: saddlebrown;
				color: white;
				position: absolute;
				left: 250px;
				top: 750px;
			}
		</style>
	</head>
	<body>
		<div class="oDiv1" id="div1">
			<div class="btn">
	          	<input type="button" value="按钮一" class="active">			
	         	<input type="button" value="按钮二">			
	        	<input type="button" value="按钮三">	
			</div>
		<ul>
			<li class="show">1</li>
			<li>2</li>
			<li>3</li>
		</ul>	
		</div>
		<!--第二个-->
		<div class="oDiv1" id="div2">
			<div class="btn">
	          	<input type="button" value="按钮一" class="active">			
	         	<input type="button" value="按钮二">			
	        	<input type="button" value="按钮三">	
			</div>
		<ul>
			<li class="show">1</li>
			<li>2</li>
			<li>3</li>
		</ul>	
		</div>
		<!--第三个-->
		<div class="oDiv1" id="div3">
			<div class="btn">
	          	<input type="button" value="按钮一" class="active">			
	         	<input type="button" value="按钮二">			
	        	<input type="button" value="按钮三">	
			</div>
		<ul>
			<li class="show">1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div id="zuo"><<<</div>
		<div id="you">>>></div>
		</div>
		<script>
			class Div1{
				constructor(div){
					this.fa = document.querySelector(div)
					this.ainp = this.fa.querySelectorAll("input");
		         	this.ali = this.fa.querySelectorAll("ul li");
		         		var zuo = document.getElementById("zuo")
		         	var you = document.getElementById("you")
		         	this.show();
				}
				show(){
					let _this = this;
					for(let i = 0;i<this.ainp.length;i++){
						this.ainp[i].onclick = function(){
							_this.show1(i);
						}
					}
				}
				show1(i){
					for(var j=0;j<this.ali.length;j++){
						this.ainp[j].className = "";
						this.ali[j].className = "";
					}
					this.ali[i].className = "show";
					this.ainp[i].className = 'active';
				}
			}
			/*第二个*/
			class Div2 extends Div1{
		         constructor(div){
			super(div);
			this.add();
			this.index=0;
		}
		add(){
   			var _this=this;
			
			setInterval(function(){
					_this.index++
					if(_this.index==_this.ainp.length){	
						_this.index=0;								
					}
					_this.show1(_this.index);
			},2000);	
		}
	}
			/*第三个*/
			class Div3 extends Div1{
		         constructor(div){
		         
			super(div);
			this.add();
			this.index=0;
		}
		add(){
   			var _this=this;
			you.onclick = function(){
				_this.index++;
				if(_this.index==_this.ainp.length){	
						_this.index=0;								
					}
					_this.show1(_this.index);
			}
			zuo.onclick = function(){
				_this.index--;
				if(_this.index==-1){	
						_this.index=2;								
					}
					_this.show1(_this.index);
			}
		}
	}

			
			window.onload = function(){
				new Div1("#div1");
				new Div2("#div2");
				new Div3("#div3");
			}
            
		</script>
	</body>
</html>
